<template>
	<!-- 搜索框 -->
	<view class="diy-search" @click="clicksearch(item)"
		:style="{  paddingTop: `${item.searchArea.paddingTop}px`,paddingBottom: `${item.searchArea.paddingBottom}px`,marginTop: `${item.searchArea.marginTop}px`,marginBottom: `${item.searchArea.marginBottom}px`, backgroundColor: item.searchArea.backgroundColor }">
		<input type="text" class="input" :disabled="true" :placeholder="item.placeHolder"
			:style="{ width: `${item.style.width}%`,lineHeight: `${item.style.lineHeight}px`,height: `${item.style.height}px`,fontSize: `${item.style.fontSize}px`,borderRadius: `${item.style.borderRadius}px`,color: item.style.color,borderColor: item.style.borderColor, backgroundColor: item.style.backgroundColor }">

		<view class="icon">
			<u-icon name="search" color="#999" size="28"></u-icon>
		</view>

	</view>
</template>

<script>
	export default {
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			item: {
				type: Object,
				default: {}
			}
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		created() {
			setTimeout(() => {
				console.log(this.item)
			}, 1000)
		},
		methods: {
			clicksearch(item) {
				uni.navigateTo({
					url:'/pages/searchbox/index?name='+'goods'
				})
			},

		}

	}
</script>

<style lang="scss">
	.diy-search {
		position: relative;
		.icon{
			position: absolute;
			top: 26%;
			right: 5%;
		}
		input {
			margin: 0 auto;
			border: 1px solid #999;
			padding: 0 20rpx;
		}
	}
</style>
